<template>
  <el-card shadow="never">
    <el-input
      v-model="departmentName"
      clearable
      prefix-icon="Search"
      placeholder="部门名称"
      @clear="departmentName = ''"
    />
    <el-tree
      ref="treeRef"
      :data="list"
      :props="{
        children: 'children',
        label: 'name',
      }"
      :filter-node-method="filterNode"
      default-expand-all
    >
      <template #empty>
        <el-empty description="暂无数据" />
      </template>
    </el-tree>
  </el-card>
</template>

<script setup>
defineProps({
  list: {
    type: Array,
    default: () => [],
  },
})

const treeRef = ref(null)
const departmentName = ref('')

watch(
  departmentName,
  (val) => {
    treeRef.value.filter(val)
  },
)

function filterNode(value, data) {
  if (!value) return true
  return data.name.includes(value)
}
</script>


<style scoped lang="scss">
.el-tree {
  margin-top: $space-small-s;
}
</style>